<HTML>
<HEAD>
<TITLE></TITLE>
<link rel="stylesheet" type="text/css" href="../css/tabs.css"/>
</HEAD>

<BODY>

<script type="text/javascript" src="../js/Util.js"></script>
<script type="text/javascript" src="../js/Ajax.js"></script>
<script type="text/javascript" src="../js/Tabs.js"></script>

<div id="myTabs" class="tabs" style="width:600px;height:400px">
	<ul class="tabs_picker">
		<li>My #1 Tab!</li>
		<li>Test Tab</li>
	</ul>
	<div class="tabs_area">
		<div class="tab">
			This is a test of the tabs and it is pretty cheese-tastic.
			You can click yourself crazy!
			<table border="1">
<tr><td>Some</td><td>gratuitous</td><td>table</td><td>is</td><td>here?</td></tr>
<tr><td>How</td><td>very</td><td>odd!</td></tr>
			</table>
		</div>
		<div class="tab">
			<p>
				this is some more text
			</p>
			
			<img src="../images/kah.png" />
		</div>
	</div>
</div>

<script type="text/javascript">

var myTabs = new Tabs( 'myTabs' );

var foo = 3;

var addNewTab = function() {
	var label = 'new tab ' + foo++;

	var tab = myTabs.add( label );
	var same_tab = myTabs.getTabByLabel( label );

	var area = myTabs.getAreaByLabel( label );
	var same_area = myTabs.getAreaByTab( tab );

	Ajax.ajax( 
		'html/tab_import.xml'
		, function( text ) { area.innerHTML = text; }
		, 'text'
	);

/*

	I didn't want to use innerHTML and text, but otherwise it just
	work...

	Here is some crazy stuff I tried to get xml working unsuccessfully

	This almost works, but the tags... aren't honored...

		Util.allKids(
			node
			, function( node ) { area.appendChild( node ); }
		);

	This causes a 'node cannot be inserted at the specified point in the hierarchy'
	buncha bs:

		area.appendChild( node );

	Also didn't work:

		area.appendChild( document.importNode( node, true ) );
	
	Using innerHTML makes me want to freakin' puke

*/
};

// TODO: stuff I know I need
// myTabs.remove( 'tab2' ); // <-- this would be cool

// still trying to decide if I want to programmaticly create new tabs
// may not be necessary right away
// var pTabs = new Tabs( 'another', 400, 600 );
// Util.id( 'tabsGoHere' ).appendChild( myTabs.nodes() );


</script>

<p>
	<a href="javascript:( function() { addNewTab(); } )();">add a tab</a>
</p>

</BODY>
</HTML>
